<template>
  <div class='sale-rank first-box'>
    <div class="tab-box pr">
      <Tab :listData="tabData" :selected="selectedIndex" :className="{padding50:true}"></Tab>
      <span class="pa color-gold btn-active" @click="gotoStore">养马保4s店</span>
    </div>
    <div class="body">
      <p><img class="fl" :src="imgs.logo1" alt=""><span>我的业绩</span></p>
      <ul>
        <li class="color999">
          <span v-for="item in titleA">{{item}}</span>
        </li>
        <li class="color333">
          <span v-for="item in myInfo">{{item}}</span>
        </li>
      </ul>
    </div>
    <GreyLine></GreyLine>
    <div class="foot">
       <p><img class="fl" :src="imgs.logo2" alt=""><span>销售排名</span></p>
       <ul>
        <li class="color999">
          <span v-for="item in titleA">{{item}}</span>
        </li>
        <li class="color333" v-for="item in listData">
          <span v-for="option in item">{{option}}</span>
        </li>
      </ul>
    </div>

    <p style="display:none">{{getListData}}</p>
  </div>
</template>
<script>
import Tab from "../../common/tab"
import GreyLine from '../../common/line.vue'
export default {
  components: {Tab,GreyLine},
  name: "",
  data() {
    return {
      imgs:{
        logo1:require("../../../assets/img/works/salerank/1.png"),
        logo2:require("../../../assets/img/works/salerank/2.png")
      },

      titleA:["排名","姓名","业绩","提成"],
      myInfo:["18","张无忌","10000","100"],

      listData:[],//类似myinfo的数据

      tabData:[
        {
          name:"今日",
          value:"1",
          click:this.changeTab
        },{
          name:"本月",
          value:"2",
          click:this.changeTab
        },{
          name:"本年",
          value:"3",
          click:this.changeTab
        }
      ],
      selectedIndex:0,
      tabValue:"1",
    };
    
  },

  computed:{
    getListData(){
      var params={
        type:this.tabValue
      }
      this.getList(params)
    }
  },
  methods: {
    changeTab(item){
      this.tabValue=item.value
    },

    // // 下拉刷新方法回调
    // pullup(func){
    //   console.log("发请求了")

    //   func()
    // },

    getList(params){
      var params=params||{
        type:this.tabValue
      }
      _g.apiPost("salesRank/init.do",params).then(res=>{
        if(res.status){
          _g.toMessage(res)
          return
        }
        var goal=[]
        var userA=[]
        res.data.forEach(ele => {
          goal.push([
            ele.num,
            ele.name,
            ele.saleroom,//业绩
            ele.salesCommissions,//提成
          ])
          if(ele.id==sessionStorage.getItem("isUser")){
            userA.push(
              ...[
                ele.num,
                ele.name,
                ele.saleroom,//业绩
                ele.salesCommissions,//提成
              ]
            )
          }
        });
        this.$set(this,"listData",goal)

        // 通过 employId 查询 当前用户
        // console.log(userA)
        this.$set(this,"myInfo",userA)
      })
    },

    gotoStore(){
      this.$store.state.dialogs.alert.content="功能正在升级中，请等待"
      this.$store.state.dialogs.alert.show=true
    }
  },
};
</script>
<style lang="scss" scoped>
.sale-rank {
  background-color: #fff;
  .tab-box{
    background-color: #f2f2f2;
    padding-bottom: 5px;

    .color-gold{
      right: 20px;
      top: 45%;
      height: 26px;
      width: 100px;
      border-radius: 13px;
      line-height: 26px;
      text-align: center;
      transform: translateY(-50%);
      box-sizing: border-box;
      border: 1px solid #FF9215;
      font-size: 14px;
    }
  }
  .body,.foot{
    padding: 15px;
    // padding-bottom: 10px;

    img{
      margin-right: 5px;
    }
    p{
      font-size: 14px;
    }
    li{
      font-size: 14px;
      display: flex;
      width: 100%;
      margin: 0;
      border-bottom: 1px solid #F2F2F2;

      span{
        width: 0;
        flex-grow: 1;
        // color: #999;
        line-height: 30px;
        text-align: center;
      }
    }
  }
}
img{
  width: 20px;
}
.padding50{
  padding-right: 150px;
}
.color333{
  color: #333
}
</style>